<template>
  <div>
    <!-- 图片回答 -->
    <div class="c-flexw-wrap c-flex-row" v-if="uploadVideoList.length>0">
      <div v-for="(item,index) in uploadVideoList" :key="index">
        <div @click.stop="clickShowVideo(item.realUrl || item.videoMp4)" class="c-p c-ww160 c-hh100 c-mb30" :class="(index+1) % 3 == 0 ? '':'c-mr32'">
          <img class="c-w100 c-h c-br20" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt="" />
          <i @click.stop="clickDelVideo(index)" class="iconfont c-fs12 c-fc-white del-img">&#xe61b;</i>
        </div>
      </div>
    </div>
    <div class="c-br16 c-bd1-mgray c-ww80 c-hh80 c-flex-row c-aligni-center c-justify-center c-p">
      <div @click="clickUploadVideo(index)" class="iconfont c-fs26 c-fc-gray">&#xe75d;</div>
    </div>
    <div class="c-fs22 c-fc-gray c-mt10">上传视频（最大1G）</div>
    <input class="hide c-cursor-p needsclick" :id="'myUpload'+formLindex" type="file" accept="video/*" @change='onInputChange($event)' />
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
  </div>
</template>
<script>
import videoPopup from "@/components/templates/common/videoPopup.vue";
import {utilJs } from "@/utils/common.js";
import TcVod from "vod-js-sdk-v6";
import myLoading from "@/plugin/loading/loading.vue";
let uploader = null;
export default {
  name: "clockVideo",
  components: {
    videoPopup,
    myLoading
  },
  props: {
    uploadVideoList: {
      type: Array,
      default: []
    },
    formLindex: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      isWeiXin : utilJs.isWeiXin() && utilJs.isMobileUserAgent(),
      showVideo:false,
      currentVideoObj:{},
      showProgress:false,
      uploadProgress:0
    };
  },
  watch: {},
  mounted() {
    this.uploadProgress = '0';
  },
  methods: {
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 删除视频
    clickDelVideo(index) {
      this.uploadVideoList.splice(index, 1);
    },
    //点击上传视频
    clickUploadVideo() {
      if (this.uploadVideoList.length >= 9) {
        this.$showCjToast({
          text: "视频最多为9个",
          type: "warn",
          time: 1000
        });
        return
      }
      document.getElementById("myUpload" + this.formLindex).click();
    },
    //获取得到的文件file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        this.$showCjToast({
          text: "视频文件大小不能超过1G",
          type: "warn",
          time: 1000
        });
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    uploadVideoToTencent(inputFile) {
      let that = this;
      this.showProgress = true;
      const tcVod = new TcVod({
        // eslint-disable-line
        getSignature: utilJs.getVideoSign
      });
      console.log(inputFile, 'inputFile')
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on("media_progress", function (info) {
        that.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(function (result) {
          that.showProgress = false;
          console.log(result.video.url)
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          that.uploadVideoList.push(videoInfo);
          let data = {
            videoId: result.fileId,
            videoMp4: result.video.url,
            videoName: inputFile.name
          };
          that.videoFirstSave(data);
          that.uploadProgress = '0';
          document.getElementById("myUpload" + that.formLindex).value = null;
        })
        .catch((err) => {
          that.showProgress = false;
          that.$showCjToast({
            text: "上传失败，请尝试重新上传",
            type: "warn",
            time: 1000
          });
          that.uploadProgress = '0';
          document.getElementById("myUpload" + that.formLindex).value = null;
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: "UPLOAD_VIDEO_ERROR"
          };
          utilJs.reprotError(errorData);
        });
    },
    //保存视频
    videoFirstSave(data) {
      utilJs.postMethod(
        global.apiurl + "signCard/videoFirstSave",
        data,
        (res) => {
          this.pusDate()
        }
      );
    },
    pusDate() {
      console.log(this.uploadVideoList, 'this.uploadVideoList')
      this.$emit('changeVal', this.formLindex, this.uploadVideoList)
    }
  },
  destroyed() {
  }
};
</script>

<style scoped>
.del-img {
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 0.7rem;
  height: 0.7rem;
  background-color: #999;
  border-radius: 50%;
  text-align: center;
  line-height: 0.7rem;
  /* cursor: pointer;
  background: rgba(0, 0, 0, 0.3); */
}
.imgInlineb  /deep/ img{display: inline-block;vertical-align: middle;}
.problemdDom /deep/ img{
  display: inline-block;
  vertical-align: middle;
}
.problemdDom /deep/ p{
  text-align: left!important;
}
.problemdDom /deep/ p img{
  display: block;
}
.problemdDom /deep/ .wscnph{
  display: block;
}
.isRight{
  color: #71DB77;
}
.isRightBg{
  background: rgba(113,219,119,0);
}
.isWrong{
  color: #FB806D;
}
.isWrongBg{
  background: rgba(251,128,109,0);
}
</style>
